<%@ page contentType="text/html; charset=UTF-8"%>
<% 
	String realPath = request.getContextPath();  
%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
	    <meta name="apple-mobile-web-app-capable" content="yes"/>
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <title>南网图讯-首页</title>
	    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/basic.css" rel="stylesheet">
	    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/index.css" rel="stylesheet">
	    <%-- <script type="text/javascript" src="<%=realPath%>/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script> --%>
		<%-- <script type="text/javascript" src="${realPath}zenithsun/news/mobile/js/index.js"></script> --%>
		<script src="<%=realPath%>/zenithsun/news/mobile/js/jquery.mobile-1.4.3.min.js"></script>
		<script src="<%=realPath%>/zenithsun/news/mobile/js/jquery-latest.min.js"></script>
		<script src="<%=realPath%>/zenithsun/news/mobile/js/iscroll.js"></script>
		<link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/scroll.css" rel="stylesheet">
	</head>
	<script type="text/javascript">
	var pageNum = 1,limit = 5; //页码
	var myScroll,
		pullDownEl, pullDownOffset,
		pullUpEl, pullUpOffset,
		generatedCount = 0;
	/**
		* 下拉刷新 （自定义实现此方法）
		* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
		*/
	function pullDownAction () {
		    pageNum = 1;
			$('#newsContainer').html('');
			doLoadNews();
			myScroll.refresh();
	}
	/**
	 * 滚动翻页 （自定义实现此方法）
	 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
	 */
	function pullUpAction () {
			$('#list').css('top','20px');   
		    pageNum = pageNum + 1;
			doLoadNews();
			$('#list').css('top','0px');
			myScroll.refresh();
	}
	function changePage(href){
		location.href=href;
	}
	$(function(){
			
			pullDownEl = document.getElementById('pullDown');
			pullUpEl = document.getElementById('pullUp');
			pullDownOffset = pullDownEl.offsetHeight;
			pullUpOffset = pullUpEl.offsetHeight;
			var id='list';
			var yLen=30;
			var hei=document.getElementById(id).maxScrollY;
			myScroll = new iScroll(id, {
				useTransition: false,
				hScroll: false,
				hScrollBar: false,
				fixedScrollBar:false,
				lockDirection:true,
				topOffset: pullDownOffset,
				onRefresh: function () {
					if (pullDownEl.className.match('loading')) {
						pullDownEl.className = '';
						//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
					} else if (pullUpEl.className.match('loading')) {
						pullUpEl.className = '';
						//pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
					}
				},
				onScrollMove: function () {
					if (this.y >= yLen && !pullDownEl.className.match('flip')) {
						pullDownEl.className = 'flip';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
						this.minScrollY = 0;
					} else if (this.y < yLen && pullDownEl.className.match('flip')) {
						pullDownEl.className = '';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
						this.minScrollY = -pullDownOffset;
					}
					else if (this.y < (this.maxScrollY - yLen) && !pullUpEl.className.match('flip')) {
						pullUpEl.className = 'flip';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
						//this.maxScrollY = this.maxScrollY;hei
						this.maxScrollY = hei;
					} else if (this.y > (this.maxScrollY + yLen) && pullUpEl.className.match('flip')) {
						pullUpEl.className = '';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
						this.maxScrollY = pullUpOffset;
					}
				},
				onScrollEnd: function () {
					if (pullDownEl.className.match('flip')) {
						pullDownEl.className = 'loading';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';				
						pullDownAction();	// Execute custom function (ajax call?)
					}
						else if (pullUpEl.className.match('flip')) {
						pullUpEl.className = 'loading';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
						pullUpAction();	// Execute custom function (ajax call?)
					}
				}
			}); 
			doLoadNews();
			/* $(window).scroll(function () {
				if ($(window).scrollTop() == $(document).height() - $(window).height()) {
					//alert('bottom!!');
					pageNum = pageNum + 1;
					doLoadNews();
				}
				if($(window).scrollTop()==0){
					alert('top');
				}
			}); */
		});
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
	function replaceErrorImg(){
		
		 //图片异常处理
		  var imgTags = document.getElementsByTagName("img");
		  for(var i = 0; i < imgTags.length; i++){
			  imgTags.item(i).onerror = function(){
		            this.src = "/csg_pic/zenithsun/news/mobile/images/Default-bg270x180.png";
		            this.onerror = null;
		      };
		  }
	}
	
	</script>
<body>
 <div id="listPage" data-role="page" data-theme="a" >
		<div id="list" class="ui-content" role="main" style="padding:0px;">
			<div id="shishi" name="shishi"  class="listDiv"  >
				<div id="pullDown">
					<span class="pullDownIcon"></span>
					<span class="pullDownLabel">下拉刷新...</span>
				</div> 
				<!--内容模块-->
				<div class="main-content">
				    <section class="ind-list-grid" id="newsContainer">
				    </section>
					<div id="newsTemplateOne" style="display: none;">
				        <div class="mod-img-area">
				            <a href="javascript:changePage('<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%')" class="mod-link-btn fn-pr">
				                <img src="<%=realPath%>%news.coverPath%">
				                <div class="mod-img-info-grid">
				                    <div class="mod-wrap">
				                        <h2 title="" class="mod-img-title fn-wto">%news.title%</h2>
				                        <div class="mod-img-desc clearfix">
				                            <p class="fn-fl fn-wto">编辑：%news.editor% / 摄影：%news.photographer%</p>
				                            <p class="fn-fr fn-wto">
				                                <span class="ind-time fn-fr">%news.publishTime%</span>
				                                <span class="ind-num fn-fr fn-dn"><i class="i-eye"></i>%news.browseCount%</span>
				                            </p>
				                        </div>
				                    </div>
				                </div>
				            </a>
				        </div>
					</div>
					<div id="newsTemplateTwo" style="display: none;">
						<div class="mod-img-area">
				            <a href="javascript:changePage('<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%')" class="mod-link-btn mod-ImgText-list">
				            	<div class="mod-img-TextList clearfix">
					                <div class="mod-img-TextList-info fn-fl">
					                    <div class="mod-wrap">
					                        <h2 title="" class="mod-TextList-title fn-wto">%news.title%</h2>
					                        <div class="mod-TextList-desc">
					                            <p class="">%news.nabstract%</p>
					                        </div>
					                    </div>
					                </div>
					                <div class="mod-img-TextList-pic fn-fr">
					            		<img src="<%=realPath%>%news.coverPath%" id="img-%news.id%">
					            	</div>
				            	</div>
				            </a>
				        </div>
				    </div>
				    <div class="mod-load-txt j-loadingTxt" id="dataLoading">
						<i class="icon-spinner icon-spin">数据加载中...</i> 
					</div>
				</div>
				    <div id="pullUp">
					<span class="pullUpIcon"></span>
					<span class="pullUpLabel" id="pullUpLabel"></span>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var flag=false;
		var ncId="${newscolumnId}";
		function doLoadNews() {
			$.post("<%=realPath%>/path/newsinfo/listnewsjson", {"ncId":ncId,"pageNo":pageNum},
				function(result) {
					if (result.state == 'Success') {
						createNewsByTemplate(result.content);
						//$('#dataLoading').hide();
					} else {
						alert("操作失败,原因："+result.content);
					}
				}
			);
		}
		
		/**
		* 根据模板创建新闻信息
		*/
		function createNewsByTemplate(pageResult){
			if(pageResult.items.length>0){
				var oneCount=0;
				var twoCount=0;
				for(var index=0;index<pageResult.items.length;index++){
					var newsInfo=pageResult.items[index];
					var template=null;
					var currNews=null;
					if(oneCount>2){
						if(twoCount>1){
							oneCount=0;
							twoCount=0;
						}else{
							template=$("#newsTemplateTwo").html();
							currNews=template;
							currNews=template4two(currNews,newsInfo);
							twoCount++;
						}
					}else{
						template=$("#newsTemplateOne").html();
						currNews=template;
						currNews=template4one(currNews,newsInfo);
						oneCount++;
					}
					$('#newsContainer').append(currNews);
				}
				//pageNum++;
			}else{
				$("#pullUpLabel").html('没有新闻了');
			}
		}
		
		function template4one(currNews,newsInfo){
			currNews=currNews.replaceAll("%news.id%",newsInfo.id);
			currNews=currNews.replaceAll("%news.coverPath%",newsInfo.coverPath);
			currNews=currNews.replaceAll("%news.title%",newsInfo.title);
			currNews=currNews.replaceAll("%news.picNum%",newsInfo.picNum+"张");
			currNews=currNews.replaceAll("%news.publishTime%",newsInfo.publishTime);
			currNews=currNews.replaceAll("%news.editor%",getNotBlank(newsInfo.editor));
			currNews=currNews.replaceAll("%news.photographer%",getNotBlank(newsInfo.photographer));
			currNews=currNews.replaceAll("%news.browseCount%",100);
			replaceErrorImg(newsInfo.id);
			return currNews;
		}
		
		function template4two(currNews,newsInfo){
			currNews=currNews.replaceAll("%news.id%",newsInfo.id);
			currNews=currNews.replaceAll("%news.coverPath%",newsInfo.coverPath);
			currNews=currNews.replaceAll("%news.title%",newsInfo.title);
			currNews=currNews.replaceAll("%news.nabstract%",getNotBlank(newsInfo.nabstract));
			replaceErrorImg(newsInfo.id);
			return currNews;
		}
		function getNotBlank(v){
			if(v==undefined){
				return "";
			}else{
				return v;
			}
		}
		String.prototype.replaceAll = function(s1,s2) { 
    		return this.replace(new RegExp(s1,"gm"),s2); 
		}
		function replaceErrorImg(id){
			
			 //图片异常处理
			  var imgTag = $('#img-'+id);
			  imgTag.onerror = function(){
			        this.src = "/csg_pic/zenithsun/news/mobile/images/Default-bg270x180.png";
			        this.onerror = null;
			}
		}
		
	</script>
</body>
</html>